<template>
  <div>
    <div class="box">
      <el-card class="box-card" style="width: 24%; margin: 0 5px 0 5px" shadow="hover">
        <div slot="header" class="clearfix">
          <span style="font-size: 110%">国内外相同牌号</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="showEdit('国内外相同牌号')">编辑</el-button>
        </div>
        <div>
          德国:<span style="display: inline-block; margin-left: 5px">{{ sameCountry.german }}</span>
          <hr />
          英国:<span style="display: inline-block; margin-left: 5px">{{ sameCountry.england }}</span>
          <hr />
          巴西:<span style="display: inline-block; margin-left: 5px">{{ sameCountry.brazil }}</span>
          <hr />
          日本:<span style="display: inline-block; margin-left: 5px">{{ sameCountry.japan }}</span>
          <hr />
          印度:<span style="display: inline-block; margin-left: 5px">{{ sameCountry.india }}</span>
          <hr />
          美国:<span style="display: inline-block; margin-left: 5px">{{ sameCountry.america }}</span>
          <hr />
          欧盟:<span style="display: inline-block; margin-left: 5px">{{ sameCountry.eu }}</span>
          <hr />
          韩国:<span style="display: inline-block; margin-left: 5px">{{ sameCountry.korea }}</span>
          <hr />
          中国台湾:<span style="display: inline-block; margin-left: 5px">{{ sameCountry.taiwan }}</span>
          <hr />
          中国:<span style="display: inline-block; margin-left: 5px">{{ sameCountry.china }}</span>
          <hr />
          俄罗斯:<span style="display: inline-block; margin-left: 5px">{{ sameCountry.russia }}</span>
          <hr />
          土耳其:<span style="display: inline-block; margin-left: 5px">{{ sameCountry.turkey }}</span>
          <hr />
          卢森堡:<span style="display: inline-block; margin-left: 5px">{{ sameCountry.luxembourg }}</span>
          <hr />
          法国:<span style="display: inline-block; margin-left: 5px">{{ sameCountry.franch }}</span>
          <hr />
          意大利 :<span style="display: inline-block; margin-left: 5px">{{ sameCountry.italy }}</span>
          <hr />
        </div>
      </el-card>
      <el-card class="box-card" style="width: 24%; margin: 0 5px 0 5px" shadow="hover">
        <div slot="header" class="clearfix">
          <span style="font-size: 110%">样品规格参数</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="showEdit('样品规格参数')">编辑</el-button> -->
        </div>
        <div v-for="(item, index) in simpleSizeOptions" :key="index" v-if="simpleSizeOptions.length != 0">
          <span style="display: inline-block; margin-left: 5px">{{ item }}</span>
          <hr />
        </div>
        <div v-if="simpleSizeOptions.length == 0">
          <span>非实验室样品，暂无样品规格信息！</span>
        </div>
      </el-card>
      <el-card class="box-card" style="width: 24%; margin: 0 5px 0 5px" shadow="hover">
        <div slot="header" class="clearfix">
          <span style="font-size: 110%">化学成分</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="showEdit('化学成分')">编辑</el-button>
        </div>
        <div>
          Ni:<span style="display: inline-block; margin-left: 5px">{{ chemical.nickel }}</span>
          <hr />
          Cr:<span style="display: inline-block; margin-left: 5px">{{ chemical.chromium }}</span>
          <hr />
          Fe:<span style="display: inline-block; margin-left: 5px">{{ chemical.ferrum }}</span>
          <hr />
          V:<span style="display: inline-block; margin-left: 5px">{{ chemical.anadium }}</span>
          <hr />
          Ti:<span style="display: inline-block; margin-left: 5px">{{ chemical.titanium }}</span>
          <hr />
          Co:<span style="display: inline-block; margin-left: 5px">{{ chemical.cobalt }}</span>
          <hr />
          Mn:<span style="display: inline-block; margin-left: 5px">{{ chemical.manganese }}</span>
          <hr />
          Si:<span style="display: inline-block; margin-left: 5px">{{ chemical.silicon }}</span>
          <hr />
          C:<span style="display: inline-block; margin-left: 5px">{{ chemical.carbon }}</span>
          <hr />
          Al:<span style="display: inline-block; margin-left: 5px">{{ chemical.aluminium }}</span>
          <hr />
          S:<span style="display: inline-block; margin-left: 5px">{{ chemical.sulfur }}</span>
          <hr />
          Cu:<span style="display: inline-block; margin-left: 5px">{{ chemical.cuprum }}</span>
          <hr />
          P:<span style="display: inline-block; margin-left: 5px">{{ chemical.phosphorus }}</span>
          <hr />
          Mo:<span style="display: inline-block; margin-left: 5px">{{ chemical.molybdenum }}</span>
          <hr />
          <!-- 备注:<span style="display: inline-block; margin-left: 5px">{{ chemical.remarks }}</span> -->
          <div>
            <span style="display: inline-block;">备注: {{ chemical.remarks }}</span>
          </div>
          <hr />
        </div>
      </el-card>
      <el-card class="box-card" style="width: 24%; margin: 0 5px 0 5px" shadow="hover">
        <div slot="header" class="clearfix">
          <span style="font-size: 110%">生产商</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="showEdit('生产商')">编辑</el-button>
        </div>
        <div>
          名称:<span style="display: inline-block; margin-left: 5px">{{ producerDetail.producer }}</span>
          <hr />
          国别:<span style="display: inline-block; margin-left: 5px">{{ producerDetail.country }}</span>
          <hr />
          地址:<span style="display: inline-block; margin-left: 5px">{{ producerDetail.address }}</span>
          <hr />
          邮箱:<span style="display: inline-block; margin-left: 5px">{{ producerDetail.email }}</span>
          <hr />
          网址:<span style="display: inline-block; margin-left: 5px">
            <a :href="producerDetail.website" target="_blank">{{ producerDetail.website }}</a>
          </span>
          <hr />
          电话:<span style="display: inline-block; margin-left: 5px">{{ producerDetail.telephone }}</span>
          <hr />
          传真:<span style="display: inline-block; margin-left: 5px">{{ producerDetail.fax }}</span>
          <hr />
          联系人:<span style="display: inline-block; margin-left: 5px">{{ producerDetail.staff }}</span>
          <hr />
          备注:<span style="display: inline-block; margin-left: 5px">{{ producerDetail.remarks }}</span>
          <hr />
          产品手册:<span style="display: inline-block; margin-left: 5px"><el-button type="text" size="mini"
              @click="downloadProductManual(producerDetail.productManual)">{{ producerDetail.productManual }}</el-button></span>
          <hr />
        </div>
      </el-card>
    </div>
    <div class="box">
      <el-card class="box-card" style="width: 24%; margin: 0 5px 0 5px" shadow="hover">
        <div slot="header" class="clearfix">
          <span style="font-size: 110%">生产商标签</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="showEdit('生产商标签')">编辑</el-button>
        </div>
        <div v-for="(item, index) in producerLabel" :key="index">
          <span style="display: inline-block; margin-left: 5px">{{ item }}</span>
          <hr />
        </div>
      </el-card>
      <el-card class="box-card" style="width: 24%; margin: 0 5px 0 5px" shadow="hover">
        <div slot="header" class="clearfix">
          <span style="font-size: 110%">材料标签</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="showEdit('材料标签')">编辑</el-button>
        </div>
        <div v-for="(item, index) in materialLabel" :key="index">
          <span style="display: inline-block; margin-left: 5px; text-align: center">{{ item }}</span>
          <hr />
        </div>
      </el-card>
      <el-card class="box-card" style="width: 24%; margin: 0 5px 0 5px" shadow="hover">
        <div slot="header" class="clearfix">
          <span style="font-size: 110%">测试仪器信息</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="showEdit('测试仪器信息')">编辑</el-button> -->
        </div>
        <!-- <el-tabs v-if="measureInstrument != {} && measureInstrument != undefined"> -->
        <el-tabs>
          <el-tab-pane v-for="(item, index) in measureInstrument" :key="index" :label="`仪器编号${item.num}`">
            <div>
              <!-- 仪器编号:<span style="display: inline-block; margin-left: 5px">{{ item.num }}</span>
              <hr /> -->
              仪器名称:<span style="display: inline-block; margin-left: 5px">{{ item.instrumentName }}</span>
              <hr />
              型号:<span style="display: inline-block; margin-left: 5px">{{ item.type }}</span>
              <hr />
              生产商:<span style="display: inline-block; margin-left: 5px">{{ item.producer }}</span>
              <hr />
              国别:<span style="display: inline-block; margin-left: 5px">{{ item.country }}</span>
              <hr />
              备注:<span style="display: inline-block; margin-left: 5px">{{ item.remarks }}</span>
              <hr />
            </div>
          </el-tab-pane>
        </el-tabs>
        <!-- <div v-if="measureInstrument == {} || measureInstrument == undefined">
          <span>非实验室样品，暂无测试仪器信息！</span>
        </div> -->
      </el-card>
      <el-card class="box-card" style="width: 24%; margin: 0 5px 0 5px" shadow="hover">
        <div slot="header" class="clearfix">
          <span style="font-size: 110%">供应商信息</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="showEdit('供应商信息')">编辑</el-button> -->
        </div>
        <div>
          供应商名称:<span style="display: inline-block; margin-left: 5px">{{ SupplierInformation.name }}</span>
          <hr />
          地址:<span style="display: inline-block; margin-left: 5px">{{ SupplierInformation.address }}</span>
          <hr />
          联系人:<span style="display: inline-block; margin-left: 5px">{{ SupplierInformation.staff }}</span>
          <hr />
          联系方式:<span style="display: inline-block; margin-left: 5px">{{ SupplierInformation.telephone }}</span>
          <hr />
          邮箱:<span style="display: inline-block; margin-left: 5px">{{ SupplierInformation.email }}</span>
          <hr />
          备注:<span style="display: inline-block; margin-left: 5px">{{ SupplierInformation.remarks }}</span>
          <hr />
        </div>
      </el-card>
    </div>
    <!-- 导入国内外相同牌号对话框 -->
    <el-dialog title="导入国内外相同牌号" :visible.sync="importMarkVisible" width="50%" @close="resetMark">
      <div v-for="index of markLength.length" :key="index">
        <!-- style="margin-bottom: 10px" -->
        <el-row :gutter="10">
          <el-col :span="5"
            style="border-right: 1px solid #ddd;padding-bottom: 10px;padding-right: 2%;width: 22.8333%;">
            <el-select v-model="selectedMark[index - 1]" placeholder="请选择或输入牌号" clearable filterable allow-create>
              <!-- <el-option v-for="item in doubleMarkList[index - 1]" :key="item.china" :label="item.china" :value="item.china"> </el-option> -->
              <el-option :key="chooseMark[0].value" :label="chooseMark[0].label" :value="chooseMark[0].value">
              </el-option>
            </el-select>
            <!-- <el-input placeholder="请输入内容" v-model="selectedMark[index - 1]" :disabled="true"></el-input> -->
          </el-col>
          <el-col :span="5" style="margin-left:10px">
            <el-select v-model="countryValue[index - 1]" placeholder="请选择国家" clearable filterable allow-create>
              <el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <!-- <el-input style="margin-right: 10px" clearable v-model="countryValue[index - 1]" placeholder="请输入国家"></el-input> -->
          </el-col>
          <el-col :span="5">
            <el-input style="margin-right: 10px" clearable v-model="markValue[index - 1]"
              placeholder="请输入对应牌号"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button @click="addMark" type="primary"><i class="el-icon-plus"></i></el-button>
          </el-col>
          <el-col :span="2">
            <el-button @click="delMark(index)"><i class="el-icon-minus"></i></el-button>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 30px">
        <el-divider></el-divider>
        <div class="noMaskMsg">注：该条记录的国别为 {{ country }}</div>
        <div class="noMaskMsg" v-show="noMarkMsgFlag">注：该条记录无牌号</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin-right: 20px" @click="resetMark">取消</el-button>
        <el-button type="primary" style="margin-right: 20px" @click="importSomeMark">导入</el-button>
      </span>
    </el-dialog>
    <!-- 导入材料标签对话框 -->
    <el-dialog title="导入材料标签" :visible.sync="importMetailVisible" width="50%" @close="resetMaterialLabel">
      <div v-for="index of materialLabelLength.length" :key="index">
        <el-row :gutter="10">
          <el-col :span="5"
            style="border-right: 1px solid #ddd;padding-bottom: 10px;padding-right: 2%;width: 22.8333%;">
            <el-select v-model="selectedMark[index - 1]" placeholder="请选择或输入牌号" clearable filterable allow-create>
              <el-option :key="chooseMark[0].value" :label="chooseMark[0].label" :value="chooseMark[0].value">
              </el-option>
              <!-- <el-option v-for="item in doubleMarkList[index - 1]" :key="item.mark" :label="item.mark" :value="item.mark"> </el-option> -->
            </el-select>
          </el-col>
          <el-col :span="5" style="margin-left:10px">
            <el-input style="margin-right: 10px" clearable v-model="materialLabelValue[index - 1]"
              placeholder="请输入材料标签"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button @click="addMaterialLabel" type="primary"><i class="el-icon-plus"></i></el-button>
          </el-col>
          <el-col :span="2">
            <el-button @click="delMaterialLabel(index)"><i class="el-icon-minus"></i></el-button>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 30px">
        <el-divider></el-divider>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin-right: 20px" @click="resetMaterialLabel">取消</el-button>
        <el-button type="primary" style="margin-right: 20px" @click="importSomeMaterialLabel">导入</el-button>
      </span>
    </el-dialog>
    <!-- 导入化学成分对话框 -->
    <el-dialog title="导入化学成分" :visible.sync="importChemVisible" width="50%" @close="resetChem">
      <div v-for="index of chemLength.length" :key="index">
        <el-row :gutter="10">
          <el-col :span="5"
            style="border-right: 1px solid #ddd;padding-bottom: 10px;padding-right: 2%;width: 22.8333%;">
            <el-select v-model="selectedMark[index - 1]" placeholder="请选择或输入牌号" clearable filterable allow-create>
              <el-option :key="chooseMark[0].value" :label="chooseMark[0].label" :value="chooseMark[0].value">
              </el-option>
              <!-- <el-option v-for="item in doubleMarkList[index - 1]" :key="item.mark" :label="item.mark" :value="item.mark"> </el-option> -->
            </el-select>
          </el-col>
          <el-col :span="5" style="margin-left:10px">
            <el-input style="margin-right: 10px" clearable v-model="elementValue[index - 1]"
              placeholder="请输入元素"></el-input>
          </el-col>
          <el-col :span="5">
            <el-input style="margin-right: 10px" clearable v-model="contentValue[index - 1]"
              placeholder="请输入元素含量"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button @click="addChem" type="primary"><i class="el-icon-plus"></i></el-button>
          </el-col>
          <el-col :span="2">
            <el-button @click="delChem(index)"><i class="el-icon-minus"></i></el-button>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 30px">
        <el-divider></el-divider>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin-right: 20px" @click="resetChem">取消</el-button>
        <el-button type="primary" style="margin-right: 20px" @click="importSomeChem">导入</el-button>
      </span>
    </el-dialog>
    <!-- 导入生产商对话框 -->
    <el-dialog title="导入生产商" :visible.sync="importSuppierVisible" width="50%" @close="resetSupplier">
      <el-form ref="RefSupplier">
        <el-form-item label="名称:" label-width="100px"><el-input
            v-model="importSupplier.producer"></el-input></el-form-item>
        <el-form-item label="国别:" label-width="100px"><el-input
            v-model="importSupplier.country"></el-input></el-form-item>
        <el-form-item label="地址:" label-width="100px"><el-input
            v-model="importSupplier.address"></el-input></el-form-item>
        <el-form-item label="邮箱:" label-width="100px"><el-input
            v-model="importSupplier.email"></el-input></el-form-item>
        <el-form-item label="网址:" label-width="100px"><el-input
            v-model="importSupplier.website"></el-input></el-form-item>
        <el-form-item label="电话:" label-width="100px"><el-input
            v-model="importSupplier.telephone"></el-input></el-form-item>
        <el-form-item label="传真:" label-width="100px"><el-input v-model="importSupplier.fax"></el-input></el-form-item>
        <el-form-item label="联系人:" label-width="100px"><el-input
            v-model="importSupplier.staff"></el-input></el-form-item>
        <el-form-item label="备注:" label-width="100px"><el-input
            v-model="importSupplier.remarks"></el-input></el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin-right: 20px" @click="resetSupplier">取消</el-button>
        <el-button type="primary" style="margin-right: 20px" @click="importOneSupplier">导入</el-button>
      </span>
    </el-dialog>
    <!-- 导入生产商标签对话框 -->
    <el-dialog title="导入生产商标签" :visible.sync="importSuppierLabelVisible" width="50%" @close="resetSupplierLabel">
      <div v-for="index of supplierLabelLength.length" :key="index">
        <el-row :gutter="10" style="margin-bottom: 10px">
          <el-col :span="6">
            <el-select v-model="selectedSupplier[index - 1]" placeholder="请选择或输入生产商" clearable filterable allow-create>
              <el-option v-for="item in doubleSupplierList[index - 1]" :key="item.producer" :label="item.producer"
                :value="item.producer"> </el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-input style="margin-right: 10px" clearable v-model="SupplierLabelValue[index - 1]"
              placeholder="请输入生产商标签"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button @click="addSupplierLabel" type="primary"><i class="el-icon-plus"></i></el-button>
          </el-col>
          <el-col :span="2">
            <el-button @click="delSupplierLabel(index)"><i class="el-icon-minus"></i></el-button>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 30px">
        <el-divider></el-divider>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin-right: 20px" @click="resetSupplierLabel">取消</el-button>
        <el-button type="primary" style="margin-right: 20px" @click="importSomeSuppierLabel">导入</el-button>
      </span>
    </el-dialog>
    <!-- 导入规格参数对话框 -->
    <el-dialog title="导入样品规格参数" :visible.sync="importSizeVisible" width="50%">
      <el-form>
        <el-form-item label="内径(m):" label-width="170px"><el-input
            v-model="importSimpeSize.innerDiameter"></el-input></el-form-item>
        <el-form-item label="外径(m):" label-width="170px"><el-input
            v-model="importSimpeSize.outerDiameter"></el-input></el-form-item>
        <el-form-item label="磁环高度(m):" label-width="170px"><el-input
            v-model="importSimpeSize.height"></el-input></el-form-item>
        <el-form-item label="质量(kg):" label-width="170px"><el-input
            v-model="importSimpeSize.mass"></el-input></el-form-item>
        <el-form-item label="初级绕组匝数:" label-width="170px"><el-input
            v-model="importSimpeSize.primaryTurns"></el-input></el-form-item>
        <el-form-item label="次级绕组匝数:" label-width="170px"><el-input
            v-model="importSimpeSize.secondaryTurns"></el-input></el-form-item>
        <el-form-item label="有效磁路长度(m):" label-width="170px"><el-input
            v-model="importSimpeSize.magneticLengthEff"></el-input></el-form-item>
        <el-form-item label="轴向截面积(m^2):" label-width="170px"><el-input
            v-model="importSimpeSize.area"></el-input></el-form-item>
        <el-form-item label="实际质量密度(kg/m^3):" label-width="170px"><el-input
            v-model="importSimpeSize.massDensity"></el-input></el-form-item>
        <el-form-item label="磁路截面积(m^2):" label-width="170px"><el-input
            v-model="importSimpeSize.magneticArea"></el-input></el-form-item>
        <el-form-item label="环宽(m):" label-width="170px"><el-input
            v-model="importSimpeSize.ringWidth"></el-input></el-form-item>
        <el-form-item label="体积(m^3):" label-width="170px"><el-input
            v-model="importSimpeSize.volume"></el-input></el-form-item>
        <el-form-item label="备注:" label-width="170px"><el-input
            v-model="importSimpeSize.remarks"></el-input></el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin-right: 20px" @click="importSizeVisible = false">取消</el-button>
        <el-button type="primary" style="margin-right: 20px">导入</el-button>
      </span>
    </el-dialog>
    <!-- 导入信息提示框 -->
    <el-dialog :title="`${importflag}导入结果提示`" :visible.sync="importResultVisible" width="50%" @close="allClose">
      <el-row style="margin-bottom:20px;">
        <el-col>
          <div class="importTable">
            <div class="importTableTitle">表中已存在的数据：</div>
            <div class="showHead" style="width: 100%">
              <div class="headItem" v-for="item in importResult">{{ item.label }}</div>
            </div>
            <div class="showBody" v-for="item in hasExist" v-if="hasExist.length != 0">
              <div class="bodyItem">{{ item.data0 }}</div>
              <div class="bodyItem">{{ item.data1 }}</div>
              <div class="bodyItem" v-if="item.data2">{{ item.data2 }}</div>
            </div>
            <div class="noImportData" v-if="hasExist.length == 0">暂无数据</div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom:20px;">
        <el-col>
          <div class="importTable">
            <div class="importTableTitle">与审核重复的数据：</div>
            <div class="showHead" style="width: 100%">
              <div class="headItem" v-for="item in importResult">{{ item.label }}</div>
            </div>
            <div class="showBody" v-for="item in dataWithCheck" v-if="dataWithCheck.length != 0">
              <div class="bodyItem">{{ item.data0 }}</div>
              <div class="bodyItem">{{ item.data1 }}</div>
              <div class="bodyItem" v-if="item.data2">{{ item.data2 }}</div>
            </div>
            <div class="noImportData" v-if="dataWithCheck.length == 0">暂无数据</div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom:20px;">
        <el-col>
          <div class="importTable">
            <div class="importTableTitle">等待审核的数据：</div>
            <div class="showHead" style="width: 100%">
              <div class="headItem" v-for="item in importResult">{{ item.label }}</div>
            </div>
            <div class="showBody" v-for="item in noExist" v-if="noExist.length != 0">
              <div class="bodyItem">{{ item.data0 }}</div>
              <div class="bodyItem">{{ item.data1 }}</div>
              <div class="bodyItem" v-if="item.data2">{{ item.data2 }}</div>
            </div>
            <div class="noImportData" v-if="noExist.length == 0">暂无数据</div>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin-right: 20px" @click="allClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
export default {
  data() {
    return {
      unSelectedFlag: true,
      mark: '',
      country: '',
      producer: '',
      selectNum: '',
      conditionInfo: {},
      dataType: '',
      sampleSize: '',
      importTag: false,
      importflag: '',
      fileFlag: 0,
      dataWithCheck: [],
      hasExist: [],
      noExist: [],
      markList: [],
      doubleMarkList: [], //牌号下拉框的二维数组
      doubleSupplierList: [], //生产商下拉框的二维数组
      //添加国内外相同牌号对话框字段
      markLength: [''],
      selectedMark: [''],
      markValue: [''],
      countryValue: [''],
      countryList: [
        { value: 'german', label: '德国' },
        { value: 'england', label: '英国' },
        { value: 'brazil', label: '巴西' },
        { value: 'japan', label: '日本' },
        { value: 'india', label: '印度' },
        { value: 'america', label: '美国' },
        { value: 'eu', label: '欧盟' },
        { value: 'korea', label: '韩国' },
        { value: 'taiwan', label: '中国台湾' },
        { value: 'china', label: '中国' },
        { value: 'russia', label: '俄罗斯' },
        { value: 'turkey', label: '土耳其' },
        { value: 'luxembourg', label: '卢森堡' },
        { value: 'franch', label: '法国' },
        { value: 'italy', label: '意大利' },
      ],
      chooseMark: [
        { value: '', label: '' }
      ],
      noMarkMsgFlag: false, //无牌号提醒信息是否显示
      //添加材料标签对话框字段
      materialLabelLength: [''],
      materialLabelValue: [''],
      //添加化学成分对话框字段
      chemLength: [''],
      elementValue: [''],
      contentValue: [''],
      //添加生产商
      importSupplier: {
        userId: '',
        id: '',
        producer: '',
        country: '',
        address: '',
        email: '',
        website: '',
        telephone: '',
        staff: '',
        fax: '',
        remarks: ''
      },
      //生产商标签
      supplierLabelLength: [''],
      selectedSupplier: [''],
      SupplierLabelValue: [''],
      //样品规格参数
      importSimpeSize: {
        innerDiameter: '', //内径
        outerDiameter: '', //外径
        height: '', //磁环高度
        mass: '', //质量
        primaryTurns: '', //初级绕组匝数
        secondaryTurns: '', //次级绕组匝数
        magneticLengthEff: '', //有效磁路长度(m)
        area: '', //轴向截面积(m^2)
        massDensity: '', //实际质量密度(kg/m^3)
        magneticArea: '', //磁路截面积(m^2)
        ringWidth: '', //环宽(m)
        volume: '', //体积(m^3)
        remarks: '' //备注
      },
      importResultVisible: false,
      importSizeVisible: false,
      importSuppierLabelVisible: false,
      importSuppierVisible: false,
      importChemVisible: false,
      importMetailVisible: false,
      importMarkVisible: false,
      importOneDataVisible: false,
      downFileName: ['软磁批量导入模板', '国内外相同牌号', '材料标签', '化学成分', '生产商', '生产商标签', '样品规格参数', '测试仪器信息', '软磁批量导入模板'],
      /***详细信息****/
      sameCountry: {
        german: '',
        england: '',
        brazil: '',
        japan: '',
        india: '',
        america: '',
        eu: '',
        korea: '',
        taiwan: '',
        china: '',
        russia: '',
        turkey: '',
        luxembourg: '',
        franch: '',
        italy: ''
      },
      materialLabel: [],
      chemical: {
        nickel: '',
        chromium: '',
        ferrum: '',
        anadium: '',
        titanium: '',
        cobalt: '',
        manganese: '',
        silicon: '',
        carbon: '',
        aluminium: '',
        sulfur: '',
        cuprum: '',
        phosphorus: '',
        molybdenum: '',
        remarks: '',
      },
      producerDetail: {
        producer: '',
        country: '',
        address: '',
        email: '',
        website: '',
        telephone: '',
        fax: '',
        staff: '',
        remarks: '',
        productManual: '',
      },
      SupplierInformation: {
        address: '',
        email: '',
        grade: '',
        id: '',
        name: '',
        remark: '',
        staff: '',
        telephone: '',
      },
      producerLabel: [],
      simpleSizeOptions: [],
      measureInstrument: [],
      /***详细信息****/
      // ******************导入信息提示框 ***********************
      importResult: [],
      importResultList: [
        { label: '表中已存在的数据：', value: 'hasExist' },
        { label: '与审核重复的数据：', value: 'dataWithCheck' },
        { label: '等待审核的数据：', value: 'noExist' },
      ],
      importMarksResult: [
        { label: '牌号', value: 'mark' },
        { label: '国家', value: 'country' },
        { label: '牌号', value: 'alias' },
      ],
      importChemResult: [
        { label: '牌号', value: 'mark' },
        { label: '元素', value: 'chemicalFormula' },
        { label: '元素含量', value: 'numberRange' },
      ],
      importSupplierResult: [
        // { label :'牌号', value: 'mark' },
        { label: '生产商', value: 'producer' },
        { label: '生产标签', value: 'producerLabel' },
      ],
      importMetailResult: [
        { label: '牌号', value: 'mark' },
        { label: '材料标签', value: 'productLabel' },
      ],
      // ******************导入信息提示框 ***********************
    }
  },
  mounted() {
    this.getOriginMessage()
  },
  methods: {
    showEdit() {
      Message({
        message: '程序员正在加班中！',
        center: true,
        customClass: 'mzindex'
      })
    },
    //获取国内外相同牌号
    getMark() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: `/basicsMarks/selectMark?mark=${this.mark}&country=${this.country}`,
        methods: 'GET',
        headers: {
          userid: JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.id
        }
      }).then(res => {
        this.sameCountry = {
          german: '',
          england: '',
          brazil: '',
          japan: '',
          india: '',
          america: '',
          eu: '',
          korea: '',
          taiwan: '',
          china: '',
          russia: '',
          turkey: '',
          luxembourg: '',
          franch: '',
          italy: ''
        }
        if (res.data.result.list == null || res.data.result.list == '') {
          this.noMarkMsgFlag = true
        } else {
          this.sameCountry = res.data.result.list[0]
          this.chooseMark[0].value = this.sameCountry.china
          this.noMarkMsgFlag = false
        }
        console.log(this.noMarkMsgFlag, "this.noMarkMsgFlag");
      })
    },
    //获取材料标签
    getMaterialLabel() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: `/basicsMaterialLabel/selectMaterialLabel?mark=${this.mark}`,
        methods: 'GET'
      }).then(res => {
        this.materialLabel = []
        this.materialLabel = res.data.result.list
        console.log('this.materialLabel ', this.materialLabel)
      })
    },
    //获取化学成分
    getChemical() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: `/basicsChemicalComponent/selectChemical?mark=${this.mark}`,
        methods: 'GET',
        headers: {
          userid: JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.id
        }
      }).then(res => {
        this.chemical = {
          nickel: '',
          chromium: '',
          ferrum: '',
          anadium: '',
          titanium: '',
          cobalt: '',
          manganese: '',
          silicon: '',
          carbon: '',
          aluminium: '',
          sulfur: '',
          cuprum: '',
          phosphorus: '',
          molybdenum: '',
          remarks: '',
        }
        if (res.data.result.list == null || res.data.result.list == '') {
        } else {
          this.chemical = res.data.result.list[0]
        }
      })
    },
    //获取生产商
    getProducer() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: `/basicsProducerInformation/selectProducer?producer=${this.producer}`,
        methods: 'GET',
        headers: {
          userid: JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.id
        }
      }).then(res => {
        this.producerDetail = {
          producer: '',
          country: '',
          address: '',
          email: '',
          website: '',
          telephone: '',
          fax: '',
          staff: '',
          remarks: '',
          productManual: ''
        }
        if (res.data.result.list == null || res.data.result.list == '') {
        } else {
          this.producerDetail = res.data.result.list[0]
          if (this.producerDetail.website.indexOf("https://") == 0 || this.producerDetail.website.indexOf("http://") == 0) {
            return
          } else {
            this.producerDetail.website = "https://" + this.producerDetail.website
          }
        }
      })
    },
    //获取供应商
    getSupplierInfo() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: `/basicsSupplierInformation/selectSupplierInformation?mark=${this.mark}`,
        methods: 'GET',
        headers: {
          userid: JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.id
        }
      }).then(res => {
        this.SupplierInformation = {
          address: '',
          email: '',
          grade: '',
          id: '',
          name: '',
          remark: '',
          staff: '',
          telephone: '',
        }
        if (res.data.result.data == null || res.data.result.data == '') {
        } else {
          this.SupplierInformation = res.data.result.data
        }
      })
    },
    //获取生产商标签
    getProducerLabel() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: `/basicsManufacturerLabel/selectProducerLabel?producer=${this.producer}`,
        methods: 'GET'
      }).then(res => {
        this.producerLabel = []
        this.producerLabel = res.data.result.list
      })
    },
    // 下载生产商产品手册
    downloadProductManual(name){
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/attachmentUpload/downLoadAttachmentFile',
        method: 'GET',
        params: {
          filename: name,
          message: this.textarea
        },
        responseType: 'blob' // 表明返回服务器返回的数据类型
      }).then(res => {
        let blob = new Blob([res.data])
        let fileName = name
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName)
        } else {
          var link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          //释放内存
          window.URL.revokeObjectURL(link.href)
        }
      })
    },
    //获取样品规格参数
    getSimpleSize() {
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: `/allMaterialData/selectSpecification?dataType=${this.dataType}样品基本参数&specification=${this.sampleSize}&num=${this.selectNum}`,
        method: 'POST'
      }).then(res => {
        this.simpleSizeOptions = []
        var i = 0
        var j = 0
        if (res.data.result.data != null) {
          for (let k in res.data.result.data) {
            if (k == 'id') {
              j++
            } else if (k == 'productId') {
              j++
            } else {
              this.simpleSizeOptions[i] = res.data.result.comments[j] + ': ' + res.data.result.data[k]
              i++
              j++
            }
          }
        }
      })
    },
    //获取测量仪器
    getMeasureInstrument() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: `/basics/Instrument/Info/selectInstrument?num=${this.selectNum}`,
        method: 'GET',
        headers: {
          userid: JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.id
        }
      }).then(res => {
        this.measureInstrument = []
        this.measureInstrument = res.data.result.list
      })
    },
    //获取详细信息
    getDetailMessage(dataType, sampleSize, mark, country, producer, conditionInfo, selectNum) {
      this.dataType = dataType.substring(0, 2)
      this.sampleSize = sampleSize
      this.mark = mark
      this.country = country
      this.producer = producer
      this.conditionInfo = conditionInfo
      this.selectNum = selectNum
      this.chooseMark[0].label = mark
      this.chooseMark[0].value = mark
      this.getMark()
      this.getMaterialLabel()
      this.getChemical()
      this.getProducer()
      this.getSupplierInfo()
      this.getProducerLabel()
      this.getSimpleSize()
      this.getMeasureInstrument()
    },
    // 处理未选择情况下的提示
    unSelected(flag) {
      this.unSelectedFlag = flag
      this.$set(this.chooseMark, 0, { value: '', label: '' })
    },

    /*****************************编辑******************************** */
    showImport(tag, index) {
      this.importTag = true
      this.importflag = tag
      this.fileFlag = index
    },
    showEdit(tag) {
      if (this.unSelectedFlag == true) { // 处理未选择情况下的提示
        Message({
          showClose: true,
          message: '请选择牌号',
          type: 'warning',
          customClass: "myMessageClass",
        })
      } else {
        this.importflag = tag
        this.showDataImport()
      }
    },
    showDataImport() {
      if (this.importflag == '软磁批量导入模板') {
        //导入一条对话框
        this.single()
      } else if (this.importflag == '国内外相同牌号') {
        //导入国内外相同牌号对话框
        this.importMarkVisible = true
      } else if (this.importflag == '材料标签') {
        //导入材料标签对话框
        this.importMetailVisible = true
      } else if (this.importflag == '化学成分') {
        //导入化学成分对话框
        this.importChemVisible = true
      } else if (this.importflag == '生产商') {
        //导入生产商对话框
        this.importSuppierVisible = true
      } else if (this.importflag == '生产商标签') {
        //导入生产商标签对话框
        this.importSuppierLabelVisible = true
      } else if (this.importflag == '样品规格参数') {
        //导入样品规格参数对话框
        this.importSizeVisible = true
      }
      this.$set(this.selectedMark, 0, this.chooseMark[0].value)
    },

    //导入国内外相同牌号
    delMark(index) {
      if (this.markLength.length === 1) return
      this.markLength.splice(index - 1, 1)
      this.selectedMark.splice(index - 1, 1)
      this.doubleMarkList.splice(index - 1, 1)
      this.markValue.splice(index - 1, 1)
      this.countryValue.splice(index - 1, 1)
    },
    addMark() {
      this.markLength.push('')
      this.doubleMarkList.push(this.markList)
      this.selectedMark.push(this.chooseMark[0].value)
      this.countryValue.push('')
      this.markValue.push('')
    },
    resetMark() {
      this.importMarkVisible = false
      this.markLength = ['']
      this.selectedMark = ['']
      this.countryValue = ['']
      this.markValue = ['']
    },
    importSomeMark() {
      var markVoList = []
      let index = this.countryList.findIndex(v => v.label === this.country)
      console.log(index);
      var preCountry = this.countryList[index].value
      for (var i = 0; i < this.markLength.length; i++) {
        markVoList.push(
          new Object({
            id: '',
            // mark: this.selectedMark[i],
            mark: this.chooseMark[0].value,
            country: this.countryValue[i],
            alias: this.markValue[i]
          })
        )
      }
      var userId = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsMarks/importMarkByUser',
        method: 'POST',
        data: {
          userId,
          markVoList,
          preCountry,
        }
      }).then(res => {
        this.importResult = this.importMarksResult
        this.dataWithCheck = res.data.result.dataWithCheck.map((item) => {
          return { data0: item.mark, data1: item.country, data2: item.alias }
        })
        this.hasExist = res.data.result.hasExist.map((item) => {
          return { data0: item.mark, data1: item.country, data2: item.alias }
        })
        this.noExist = res.data.result.noExist.map((item) => {
          return { data0: item.mark, data1: item.country, data2: item.alias }
        })
        this.importMarkVisible = false
        // this.importResultVisible = true
        Message({
          showClose: true,
          message: '请等待审核',
          type: 'success',
          customClass: "myMessageClass",
        })
      })
    },
    // 导入窗口和编辑窗口全部关闭
    allClose() {
      this.importMarkVisible = false
      this.importChemVisible = false
      this.importMetailVisible = false
      this.importSuppierLabelVisible = false
      this.importResultVisible = false
    },

    //导入多条材料标签
    addMaterialLabel() {
      this.materialLabelLength.push('')
      this.materialLabelValue.push('')
      this.selectedMark.push(this.chooseMark[0].value)
      this.doubleMarkList.push(this.markList)
    },
    delMaterialLabel(index) {
      if (this.materialLabelLength.length === 1) return
      this.materialLabelLength.splice(index - 1, 1)
      this.materialLabelValue.splice(index - 1, 1)
      this.selectedMark.splice(index - 1, 1)
      this.doubleMarkList.splice(index - 1, 1)
    },
    resetMaterialLabel() {
      this.importMetailVisible = false
      this.selectedMark = ['']
      this.materialLabelLength = ['']
      this.materialLabelValue = ['']
    },
    importSomeMaterialLabel() {
      var materialLabelVoList = []
      for (var i = 0; i < this.materialLabelLength.length; i++) {
        materialLabelVoList.push(
          new Object({
            id: '',
            mark: this.selectedMark[i],
            productLabel: this.materialLabelValue[i]
          })
        )
      }
      var userId = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsMaterialLabel/importMaterialLabelByUser',
        method: 'POST',
        data: {
          userId,
          materialLabelVoList
        }
      }).then(res => {
        this.importResult = this.importMetailResult
        this.dataWithCheck = res.data.result.dataWithCheck.map((item) => {
          return { data0: item.mark, data1: item.productLabel, data2: '' }
        })
        this.hasExist = res.data.result.hasExist.map((item) => {
          return { data0: item.mark, data1: item.productLabel, data2: '' }
        })
        this.noExist = res.data.result.noExist.map((item) => {
          return { data0: item.mark, data1: item.productLabel, data2: '' }
        })
        // this.importResultVisible = true
        this.importMetailVisible = false
        Message({
          showClose: true,
          message: '请等待审核',
          type: 'success',
          customClass: "myMessageClass",
        })
        // this.importMetailVisible = false
      })
    },

    //导入多条化学成分
    addChem() {
      this.chemLength.push('')
      this.elementValue.push('')
      this.contentValue.push('')
      this.selectedMark.push(this.chooseMark[0].value)
      this.doubleMarkList.push(this.markList)
    },
    delChem() {
      if (this.chemLength.length === 1) return
      this.chemLength.splice(index - 1, 1)
      this.elementValue.splice(index - 1, 1)
      this.contentValue.splice(index - 1, 1)
      this.selectedMark.splice(index - 1, 1)
      this.doubleMarkList.splice(index - 1, 1)
    },
    resetChem() {
      this.importChemVisible = false
      this.chemLength = ['']
      this.selectedMark = ['']
      this.elementValue = ['']
      this.contentValue = ['']
    },
    importSomeChem() {
      //化学成分导入
      var chemicalVoList = []
      for (var i = 0; i < this.chemLength.length; i++) {
        chemicalVoList.push(
          new Object({
            id: '',
            mark: this.selectedMark[i],
            numberRange: this.contentValue[i],
            chemicalFormula: this.elementValue[i]
          })
        )
      }
      var userId = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsChemicalComponent/importChemical',
        method: 'POST',
        data: {
          userId,
          chemicalVoList
        }
      }).then(res => {
        this.importResult = this.importChemResult
        this.dataWithCheck = res.data.result.dataWithCheck.map((item) => {
          return { data0: item.mark, data1: item.chemicalFormula, data2: item.numberRange }
        })
        this.hasExist = res.data.result.hasExist.map((item) => {
          return { data0: item.mark, data1: item.chemicalFormula, data2: item.numberRange }
        })
        this.noExist = res.data.result.noExist.map((item) => {
          return { data0: item.mark, data1: item.chemicalFormula, data2: item.numberRange }
        })
        // this.importResultVisible = true
        this.importChemVisible = false
        Message({
          showClose: true,
          message: '请等待审核',
          type: 'success',
          customClass: "myMessageClass",
        })
        // this.importChemVisible = false
      })
    },

    //导入生产商
    importOneSupplier() {
      this.importSupplier.userId = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsProducerInformation/importProducerInformationByUser',
        method: 'POST',
        data: this.importSupplier
      }).then(res => {
        Message({
          showClose: true,
          message: '请等待审核',
          type: 'success',
          customClass: "myMessageClass",
        })
        this.importSuppierVisible = false
      })
    },
    resetSupplier() {
      this.importSupplier.producer = ''
      this.importSupplier.country = ''
      this.importSupplier.address = ''
      this.importSupplier.email = ''
      this.importSupplier.website = ''
      this.importSupplier.telephone = ''
      this.importSupplier.fax = ''
      this.importSupplier.staff = ''
      this.importSupplier.remarks = ''
      this.importSuppierVisible = false
    },

    //导入多条生产商标签
    addSupplierLabel() {
      this.supplierLabelLength.push('')
      this.SupplierLabelValue.push('')
      this.selectedSupplier.push('')
      this.doubleSupplierList.push(this.supplierList)
    },
    delSupplierLabel(index) {
      if (this.supplierLabelLength.length === 1) return
      this.supplierLabelLength.splice(index - 1, 1)
      this.SupplierLabelValue.splice(index - 1, 1)
      this.selectedSupplier.splice(index - 1, 1)
      this.doubleSupplierList.splice(index - 1, 1)
    },
    resetSupplierLabel() {
      this.importSuppierLabelVisible = false
      this.supplierLabelLength = ['']
      this.selectedSupplier = ['']
      this.SupplierLabelValue = ['']
    },
    importSomeSuppierLabel() {
      var manufacturerLabelVoList = []
      for (var i = 0; i < this.supplierLabelLength.length; i++) {
        manufacturerLabelVoList.push(
          new Object({
            id: '',
            producerLabel: this.SupplierLabelValue[i],
            producer: this.selectedSupplier[i]
          })
        )
      }
      var userId = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsManufacturerLabel/importManufacturerLabel',
        method: 'POST',
        data: {
          userId,
          manufacturerLabelVoList
        }
      }).then(res => {
        this.importResult = this.importSupplierResult
        this.dataWithCheck = res.data.result.dataWithCheck.map((item) => {
          return { data0: item.producer, data1: item.producerLabel, data2: '' }
          // return { data0: item.mark, data1: item.producer, data2: item.producerLabel }
        })
        this.hasExist = res.data.result.hasExist.map((item) => {
          return { data0: item.producer, data1: item.producerLabel, data2: '' }
        })
        this.noExist = res.data.result.noExist.map((item) => {
          return { data0: item.producer, data1: item.producerLabel, data2: '' }
        })
        // this.importResultVisible = true
        this.importSuppierLabelVisible = false
        Message({
          showClose: true,
          message: '请等待审核',
          type: 'success',
          customClass: "myMessageClass",
        })
        // this.importSuppierLabelVisible = false
      })
    },
    /*****************************编辑******************************** */
    //获取常用信息
    getOriginMessage() {
      this.getSupplier()
      this.getStandard()
      this.getSize()
      this.getAllMark()
    },
    //获取所有生产商
    getSupplier() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsProducerInformation/getProducerName',
        method: 'GET'
      }).then(res => {
        this.supplierList = res.data.result
        this.doubleSupplierList.push(this.supplierList)
      })
    },
    //获取所有的执行标准
    getStandard() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsExecutionStandard/selectExecution',
        method: 'POST'
      }).then(res => {
        this.standardList = res.data.result
      })
    },
    //获取样品规格
    getSize() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsSpecificationName/selectSpecificationName?dataNum=1',
        method: 'GET'
      }).then(res => {
        this.sizeList = res.data.result
      })
    },
    //获取所有牌号
    getAllMark() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsMarks/getAllMarks',
        method: 'GET'
      }).then(res => {
        this.markList = res.data.result.mark
        this.doubleMarkList.push(this.markList)
      })
    }
  }
}
</script>

<style scoped lang="less">
.box {
  margin-top: 10px;
  display: flex;
  /* justify-content: space-between; */
}

/deep/.el-table th.el-table__cell {
  text-align: center;
  background-color: #FaFaFa;
}

/deep/.el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
}

/deep/.el-card__body {
  height: 373px;
  overflow-y: auto;
}

.myMessageClass {
  z-index: 10000 !important;
}

.importTable {
  .importTableTitle {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .showHead {
    width: 100%;
    display: flex;

    .headItem {
      // width: 33%;
      flex: 1;
      border: 1px solid #ebeef5;
      border-right: none;
      background-color: #fafafa;
      height: 49px;
      font-weight: 700;
      color: rgb(144, 147, 153);
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center
    }

    .headItem:last-child {
      border-right: 1px solid #ebeef5;
    }
  }

  .showBody {
    width: 100%;
    display: flex;

    .bodyItem {
      // width: 33%;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 48px;
      color: rgb(96, 98, 102);
      border-left: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
      text-align: center
    }

    .bodyItem:last-child {
      border-right: 1px solid #ebeef5;
    }
  }

  .noImportData {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(96, 98, 102);
    border: 1px solid #ebeef5;
    border-top: none;
    text-align: center
  }
}
</style>
